<script setup>

import {Message, Upload} from "@element-plus/icons-vue";

function person() {
  console.log("个人信息")
}
function setting() {
  console.log("设置")
}
function exit() {
  // 清楚 sension
  window.sessionStorage.clear()
}
// 暗黑模式
import { useDark, useToggle } from '@vueuse/core';

// useDark()可以获取当前的主题模式是不是暗黑模式，返回的是布尔值
const isDark = useDark();

// useToggle()类似于开关，能将useDark()取反，实现主题模式切换效果
const toggleDark = useToggle(isDark);

// # 弹出框
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'

const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

// #文本
const textarea = ref('')
import {watch} from "vue";
//上传
import { UploadFilled } from '@element-plus/icons-vue'
// 设置在提交信息
let yesload = ref(false)
watch(textarea, (newValue) => {
  yesload.value = newValue.trim() !== '';
});
import { ElNotification } from 'element-plus'
import axios from 'axios'

const submit = () => {
  if (yesload.value) {
    // 发送 POST 请求
    axios.post('http://localhost:9090/api/feedback', {
      feedback: textarea.value // 将文本域的值作为反馈内容发送
    })
        .then(res => {
          console.log(res.data); // 输出响应数据
          // 弹出成功通知
          ElNotification({
            title: 'Success',
            message: '提交成功',
            type: 'success',
          });
          textarea.value = '';  // 清空文本域
          popoverRef.value.hide(); // 隐藏弹出框
        })
        .catch(err => {
          console.error('请求失败：', err);
          // 弹出错误通知
          ElNotification({
            title: 'Error',
            message: '提交失败',
            type: 'error',
          });
        });
  }
};

function handleCancel() {
  textarea.value = '';  // 清空文本域
  popoverRef.value.hide();
}

// 退出
const exitValue = ref(false)
</script>

<template>

  <!--  <button id="showPopup" onclick="showPopup()">弹出</button>-->
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-row class="header-1">
          <el-col :span="12" >
            <a href=""><img class="img" src="../img/root-removebg-preview.png" alt=""></a>
          </el-col>
          <div class="flex-grow" />
          <!--        暗黑模式设置 https://blog.csdn.net/ymzhaobth/article/details/125521766#:~:text=%E9%80%9A%E8%BF%87%E5%9C%A8html%E6%A0%87%E7%AD%BE%E4%B8%8A%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%90%8D%E4%B8%BA%20dark%20%E7%9A%84%E7%B1%BB%E6%9D%A5%E5%90%AF%E7%94%A8%20%E5%9F%BA%E4%BA%8E%20vue3%20%26%20element-plus%20%E7%9A%84%E9%A1%B9%E7%9B%AE%E7%8E%B0%E5%9C%A8%E5%8F%AF%E4%BB%A5%E6%96%B9%E4%BE%BF%E7%9A%84%E6%B7%BB%E5%8A%A0%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F,%E4%BD%86%E4%B8%BA%E4%BA%86%E6%96%B9%E4%BE%BF%E5%88%87%E6%8D%A2%E4%BB%A5%E5%8F%8A%E8%BF%9B%E4%B8%80%E6%AD%A5%E7%9A%84%E5%AE%9A%E5%88%B6%E5%8C%96%EF%BC%8C%E5%AE%98%E6%96%B9%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%20useDark%20%7C%20VueUse%20%E7%A4%BA%E4%BE%8B%EF%BC%9A%E4%BB%A5%E4%B8%8B%EF%BC%8C%E5%9F%BA%E4%BA%8E%20element-plus%20switch%E7%BB%84%E4%BB%B6%20%E5%88%9B%E5%BB%BA%E4%BA%86%E4%B8%80%E4%B8%AA%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E5%BC%80%E5%85%B3%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%B0%86%E5%AE%83%E6%94%BE%E5%85%A5%E8%8F%9C%E5%8D%95%E6%A0%8F%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E6%96%B9%E4%BE%BF%E5%9C%B0%E5%88%87%E6%8D%A2%E6%A8%A1%E5%BC%8F%E4%BA%86 -->
          <span @click.stop="toggleDark()" ></span>
          <!--        功能反馈-->
          <el-switch size="small" v-model="isDark" class="toolbar"/>
          <el-popover
              ref="popoverRef"
              trigger="click"
              title="请输入产品功能问题及改进建议"
              virtual-triggering
              persistent
              width="290"
          >
            <el-input
                v-model="textarea"
                style="width: 263px"
                :rows="2"
                type="textarea"
                placeholder="请输入您的意见/建立（200字以内）"
            />
            <el-upload
                class="upload-demo"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                <el-icon><Upload /></el-icon> <em>上传图片</em>
              </div>
            </el-upload>
            <span class="button-right">
              <el-button @click="handleCancel">取消</el-button>
              <el-button
                  plain @click="submit"
                  :class="{'is-active': yesload}"
                  :disabled="!yesload">提交</el-button>
            </span>
          </el-popover>

          <el-button class="header-button"  v-popover="popoverRef" v-click-outside="onClickOutside" >
            <el-icon size="20" ><Message /></el-icon>
            <span >功能反馈</span>

          </el-button>

          <!--        # 设置功能-->
          <div class="toolbar">
            <el-dropdown>
              <img src="../img/human9.png" class="img">
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="person">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="setting">设置</el-dropdown-item>
                  <a href="/"><el-dropdown-item @click="exit">退出登录</el-dropdown-item></a>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-row>

      </el-header>
      <!--      # 设置横行-->
      <el-divider border-style="double" />
      <el-container>
        <el-aside class="left">
          <el-container>
              <span class="userBooks">
                <strong>叽里</strong>咕噜 <strong>使用手册</strong>
                <br>
               <el-divider border-style="double" />
                <!--                let userBooks = ["一、什么是叽里咕噜", "二、3分钟学会叽里咕噜指令", "三、叽里咕噜进阶应用指南", "四、叽里咕噜团队介绍"]-->
                <a  href="/about">一、什么是叽里咕噜<br><br></a>
                <a  href="/about1">二、3分钟学会叽里咕噜指令<br><br></a>
                <a  href="/about2">三、叽里咕噜进阶应用指南<br><br></a>
                <a  href="/about3">四、叽里咕噜团队介绍<br><br></a>

              </span>
          </el-container>
        </el-aside>
        <el-main class="main">
          <el-header class="main-header">
            <el-row class="row-bg" justify="row-bg">
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h1>
                一、认识叽里咕噜
              </h1>
                <p class="update-time">更新时间：2024-07-04</p>
              </el-col>
              <el-divider border-style="double" />
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h2 id="index1">
                （一）什么是叽里咕噜
              </h2>
                <p class="text">
                  <strong>叽里</strong>咕噜是草原三剑客团队研发的 <strong>人工智能大语言模型产品，能够通过上一句话，预测生成下一段话。</strong> 任何人都可以通过输入【指令】和叽里咕噜进行对话互动、提出问题或要求，让叽里咕噜高效地帮助人们获取信息、知识和灵感。
                </p >
                <p class="text">
                  *指令（prompt）其实就是文字，它可以是你向叽里咕噜提的问题（如： 帮我解释一下什么是芯片 ），可以是你希望叽里咕噜帮你完成的任务（如： 帮我写一首诗/画一幅画* ）
                </p>
              </el-col>
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h2 id="index2">
                （二）叽里咕噜的基础能力
              </h2>
                <p class="text">叽里咕噜由咕噜大模型驱动，具备理解、生成、逻辑、记忆四大基础能力。当前咕噜大模型已升级至4.0Turbo版本，能够帮助你轻松搞定各类复杂任务</p>
                <p class="text"><strong>理解能力：</strong> 听得懂潜台词、复杂句式、专业术语，<strong>今天，人类说的每一句话，它大概率都能听懂！</strong></p>
                <p class="text"><strong>生成能力：</strong> 快速生成文本、代码、图片、图表、视频，<strong>今天，人类目光所致的所有内容，它几乎都能生成！</strong></p>
                <p class="text"><strong>逻辑能力：</strong> 复杂的逻辑难题、困难的数学计算、重要的职业/生活决策统统能帮你解决，<strong>情商智商双商在线！</strong></p>
                <p class="text"><strong>记忆能力：</strong> 不仅有高性能，更有好记性。N轮对话过后，你话里的重点，它总会记得，<strong>帮你步步精进，解决复杂任务！</strong></p>
              </el-col>
              <el-col :span="20"><div class="grid-content ep-bg-purple" /><h2 id="index3">
                （三）叽里咕噜的的应用场景
              </h2>
                <p class="text">叽里咕噜的<strong>应用场景非常广泛，可以满足各种需求，包括但不限于：</strong></p>
                <p class="text"><strong>本地检索问答</strong>
                  <br><ul>
                    <p class="text">
                      计算用户问句与问答库中问句的相似度，选择最相似的问句，给出其对应的答复。
                    </p>
                    <p class="text">
                      句子相似度计算包括以下方法：
                    </p>
                    <p class="li text">TFIDF</p>
                    <p class="li text">BM25</p>
                    <p class="li text">OneHot</p>
                    <p class="li text">Query Vector</p>
                  </ul>
                </p>
                <p class="text"><strong>网络检索问答</strong><p class="text">对百度、Bing的搜索结果摘要进行答案的检索</p>
                  <p class="text li">百度搜索，包括百度知识图谱、百度诗词、百度万年历、百度计算器、百度知道</p>
                  <p class="li">微软Bing搜索，包括bing知识图谱、bing网典</p></p>
                <p class="text"><strong>任务型对话</strong><p class="text li">End to End Memory Networks(memn2n)<p class="text li">BABi dataset</p></p></p>
                <p class="text"><strong>聊天型对话</strong><p class="li text">GPT2 Model</p ><p class="li text">Sequence To Sequence Model(seq2seq)</p><p class="li text">Taobao dataset</p></p>
              </el-col>
              <el-col>
                <div style="line-height: 200px; height: 200px; text-align: center;">
                  <img src="../img/acknowl.png" style="display: inline-block; vertical-align: middle;" />
                </div>
              </el-col>
            </el-row>
          </el-header>
        </el-main>

        <el-aside class="right">

        <span class="right-text">

          <br>
          <a href="#index1" class="jianjie">一、什么是叽里咕噜</a><br>
          <a href="#index2" class="jianjie">二、叽里咕噜的基础能力</a><br>
          <a href="#index3" class="jianjie">三、叽里咕噜的的应用场景</a><br>
        </span>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.el-button.is-active {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #fff;
}

.el-button:disabled {
  background-color: #dcdfe6;
  border-color: #dcdfe6;
  color: #c0c4cc;
}
.button-right {
  float: right;
  margin-right: 20px;
}

.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  height: 35px;
  width: 50px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.li {
  text-indent: 20px;
  font-size: 12px;
  font-family: 华文仿宋;
}

a {
  text-decoration: none;
  font-family: 黑体;
  font-size: 15px;
}
h2 {
  font-size: 20px;
  font-family: "微软雅黑";
}
.text {
  margin: 1em 0;
  font-size: 12px;
  font-family: 微软雅黑;
}
.userBooks{
  padding: 50px;
}
.update-time {
  font-size: 12px;
  font-family: 宋体;
}
.jianjie {
  font-size: 15px;
  font-family: 华文仿宋;
}
.right-text {
  float: left;
}
.header-1 {
  padding: 15px;
}
.header {
  height: 35px;
}
h1 {
  font-size: 35px;
  font-family:华文仿宋;
}

.header-button {

  height: 35px;
  width: 100px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.img {
  height: 35px;
  width: auto;
}
.flex-grow {
  flex-grow: 1;
}

.left {
  /* 设置行内快  https://blog.csdn.net/ke1ying/article/details/102676638*/
  width: 20%;
}
.main {
  width: 60%;
  height: 93vh;
}
.right{
  /*沾满总页 https://geek-docs.com/css/css-ask-answer/133_css_make_body_have_100_of_the_browser_height.html*/
  width: 20%;
}

</style>
